@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    string id = ViewData["id"].ToString();
}
<input type="text" id="pictype" value="0"/><input type="button" value="查" onclick="SetChart()">
<a href="@Url.Action("InfoList","Account",new {id=id })">列表</a>
<div>支出<span id="outvalue"></span></div><div>收入<span id="addvalue"></span></div><div>现在<span id="nowvalue"></span></div>
<div id="container" style="height: 600px;width:100%"></div>
<div>
    <div>添加</div>
    <span>类型</span><input type="text" id="types" />
    <span>数额</span><input type="text" id="number" />
    <span>备注</span><input type="text" id="remarks" />
    <span>日期</span><input type="text" id="date" />
    <div onclick="AddRecord()">确认添加</div>
</div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    window.onload = function () {
        SetChart();
    }
        function AddRecord() {
            var type = document.getElementById("types").value;
            var number = document.getElementById("number").value;
            var remarks = document.getElementById("remarks").value;
            var date = document.getElementById("date").value;
        $.ajax({
            type: "post",
            url: "/Account/AddRecord",
            data: { "id": "@id", "type": type, "number": number, "remarks": remarks, "date": date},
            success: function (data) {
                alert(data);
                SetChart();
        },
            error: function (err) { alert(err); }
        });
    }
    function SetChart() {
        var type = document.getElementById("pictype").value;
         $.ajax({
            type: "post",
                url: "/Account/GetDataHaveType",
                data: { "id": "@id", "type": type},
            success: function (data) {
                Setoption(data);
        },
             error: function (err) { alert(err);}
        });

    }
    function Setoption(data) {
       var obj= JSON.parse(data);
         var option;
    option = {
        xAxis: {
            type: 'category',
            data: obj.date,
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: obj.value,
            type: 'line'
        }]
    };
        document.getElementById("outvalue").innerHTML = obj.outValue;
        document.getElementById("addvalue").innerHTML = obj.addValue;
        document.getElementById("nowvalue").innerHTML = obj.nowValue;
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }
</script>